<template>
  <!-- 数据字典界面 -->
  <div class="data-dic">
    <div class="d-container">
      <section class="d-content">
        <!-- 左边 -->
        <aside class="left">
          <table cellspacing="0" cellpadding="0">
            <tr>
              <th>数据字典</th>
            </tr>
            <tr>
              <td>
                <ul>
                  <li v-for="(item, index) in dataDictionary" :key="index">
                    <span class="el-icon-folder" />
                    <el-link :disabled="item.disabled" @click="handleDic(item)">
                      {{ item.value }}
                    </el-link>
                  </li>
                </ul>
              </td>
            </tr>
          </table>
        </aside>
        <!-- 右边 -->
        <aside class="right-r">
          <div class="table-data">
            <header>
              <span>列表</span>
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="small"
                @click="handleAdd"
              >
                添加
              </el-button>
            </header>
            <div class="box">
              <TablePaging
                :table-list="deviceList"
                border
                :table-column="deviceTableColumn"
                :table-buttons="deviceTableButtons"
                :table-btn-width="140"
                :table-paging="deviceTablePaging"
                :table-total="deviceTableTotal"
                @pagingChange="handlePaginChange"
              />
            </div>
          </div>
        </aside>
      </section>
    </div>
    <device-update
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="() => (dialogVisible = false)"
      :handle-submit="handleModalSubmit"
      :form-data="modalFormData"
      :device-code-disabled="deviceCodeDisabled"
    />
  </div>
</template>

<script>
import {
  dictionaryFindePage,
  dictionaryAdd,
  dictionaryDelete,
  dictionaryUpdate,
  dictionaryGet
} from '@/api/systemManage'
import { tableColumn } from './config'
import { TablePaging } from '@/components'
import DeviceUpdate from './update'
import { dataDictionary } from '@/config/dict'

export default {
  name: 'Home',
  components: { TablePaging, DeviceUpdate },
  data() {
    return {
      input: '',
      deviceTableColumn: tableColumn(1, 10),
      deviceList: [],
      deviceTableButtons: [
        // 设备表操作按钮
        {
          name: '编辑',
          click: this.handleEdit
        },
        {
          name: '删除',
          confirm: '确认删除？',
          click: this.postDeviceDelete
        }
      ],
      deviceTablePaging: {
        page: 1,
        pagesize: 10
      },
      deviceTableTotal: 0,
      dialogTitle: '添加', // 弹窗标题
      dialogVisible: false, // 弹窗显示隐藏
      modalFormData: {}, // 弹窗表单数据
      deviceCodeDisabled: false, // 设备号是否禁止修改
      visible: false,
      tableData: [],
      dataDictionary: dataDictionary,
      groupName: '业务类型'
    }
  },
  mounted() {
    this.postFindPage()
  },
  methods: {
    handleModalSubmit(values) {
      // 弹窗表单提交
      if (values.id) {
        this.postDeviceUpdate(values)
        return false
      }
      this.postDeviceAdd(values)
    },
    handlePaginChange(pageInfo) {
      // 分页改变
      this.deviceTablePaging = pageInfo
      this.postFindPage()
      const { page, pagesize } = pageInfo
      this.deviceTableColumn = tableColumn(page, pagesize)
    },
    handleAdd() {
      // 点击添加
      this._setModalData('添加', true, { groupName: this.groupName })
    },
    handleEdit(id) {
      // 点击编辑
      dictionaryGet({ id }).then(res => {
        this._setModalData('修改', true, res)
      })
    },
    postDeviceAdd(values) {
      // 设备新增
      dictionaryAdd({ ...values, parentId: 0 }).then(res => {
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: '添加成功'
        })
        this.postFindPage()
      })
    },

    handleDic(item) {
      // 点击数据字典
      this.groupName = item.value
      this.postFindPage()
    },

    _setModalData(title = '添加', visible = true, formData = {}) {
      // 设置弹窗
      this.modalFormData = formData
      this.dialogTitle = title
      this.dialogVisible = visible
      this.deviceCodeDisabled = title !== '添加'
    },
    postDeviceUpdate(values) {
      // 设备更新
      dictionaryUpdate({ ...values, parentId: 0 }).then(() => {
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        this.postFindPage()
      })
    },

    postDeviceDelete(id) {
      // 设备删除
      dictionaryDelete({ id }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.postFindPage()
      })
    },
    postFindPage() {
      dictionaryFindePage({
        ...this.deviceTablePaging,
        groupName: this.groupName
      }).then(res => {
        const { records, current, size, total } = res
        this.deviceList = records
        this.deviceTablePaging = {
          page: current,
          pagesize: size
        }
        this.deviceTableTotal = total
      })
    },

    handle(e, val) {
      console.log(e)

      console.log(val)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scope>
@import './dataDic';
</style>
